<template>
	<view class="bookList">
		<!-- 商品主数据列表-->
		<el-dialog v-dialogDrag title="选取小说" width="900px" top="1vh" :visible.sync="show" center append-to-body
			:close-on-click-modal="false"  @close="cancel">
			<div style="padding-bottom: 40px;">
				<div style="display: flex;flex-wrap: wrap;margin-bottom: 10px;float: right;">
					<lz-row-col>
						<el-input v-model="dialog.seach.keyword" placeholder="请输入小说名" :size="size"
							@keyup.enter.native="dialogSeach"></el-input>
					</lz-row-col>
					<lz-row-col >
						<el-button type="primary" icon="el-icon-search" :size="size" style="margin:0 10px;"
							@click="dialogSeach()">搜索</el-button>
					</lz-row-col>
				</div>
		
				<el-table :data="dialog.list" border size="mini" center class="lztable">
					<el-table-column label="小说封面" width="120" align="center">
						<template slot-scope="scope">
							<el-radio :label="JSON.stringify(scope.row)" v-model="dialog.selectItem" class="radio">
								<image :src="scope.row.bookImageSrc" class="image"></image>
							</el-radio>
						</template>
					</el-table-column>
					<el-table-column prop="bookName" label="小说名称" sortable>
						<template slot-scope="scope">
							<el-link type="primary">{{scope.row.bookName}}</el-link>
						</template>
					</el-table-column>
					<el-table-column prop="bookAuthor" label="小说作者" width="160"  sortable align="center"></el-table-column>
					<el-table-column prop="bookTypeTxt" label="小说类型" width="160"  sortable align="center"></el-table-column>
					<el-table-column prop="popularityNum" label="小说人气" width="100"  sortable align="center">
						<template slot-scope="scope">
							<el-link type="danger">{{scope.row.popularityNum}}</el-link>
						</template>
					</el-table-column>
					<el-table-column prop="lastUpdate" label="最后更新时间" sortable align="center"></el-table-column>
				</el-table>
				<!-- //分页 -->
				<el-pagination style="float: right;margin-top: 10px;" class="lz-el-pagination"
					@current-change="handleCurrentChange" @size-change="dialoghandleSizeChange"
					:current-page="dialog.page.pageNum" :page-sizes="[10,20,30]" :page-size="dialog.page.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="dialog.page.total">
				</el-pagination>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel" size="mini">取 消</el-button>
				<el-button type="primary" @click="bindConfiguration" size="mini">确 定</el-button>
			</span>
		</el-dialog>
	</view>
</template>

<script>
	let that;
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'bookList',
		props: {
			activeInfo: {
				type: Object,
				default: () => {
					return {};
				}
			},
			show:{
				type: Boolean,
				default: () => {
					return false;
				}
			}
		},
		computed: {
			...mapState('ui',['size']),
		},
		data() {
			return {
				dialog: {
					selectItem: '', //已选择的
					seach: {
						keyword: '', //关键词
					},
					list: [],
					page: {
						pageNum: 1, //当前页数
						pageSize: 10, //默认一页展示10条
						total: 0, //总条数
						bookType:''
					}
				},
			};
		},
		watch:{
		},
		mounted() {
			that = this;
			//获取小说列表
			that.getBookList()
		},
		methods: {
			//取消
			cancel(){
				this.$emit('cancel',true)
			},
			//搜索小说
			dialogSeach(){
				this.dialog.page.pageNum=1
				//获取小说列表
				that.getBookList()
			},
			//获取小说数据
			getBookList(page){
				let req={
					params:{
						keyword:that.dialog.seach.keyword,
						pageSize:that.dialog.page.pageSize,
						pageNum:that.dialog.page.pageNum,
						bookType:that.dialog.page.bookType
					},
					showLoad:false,
					active:'seachBook'
				}
				uni.$lizhao.doCloud('get-books',req).then(res=>{
					if(res.code==0){
						that.dialog.list=res.data
						that.dialog.page.total=res.total
					}else{
						that.dialog.list=[]
						that.dialog.page.total=0
					}
				})
			},
			bindConfiguration(){
				if(this.dialog.selectItem){
					that.$emit('submit',this.dialog.selectItem)
				}else{
					that.$message.warning('您还没有做任何选择')
				}
				
			},
			//分页
			handleCurrentChange(val) {
				that.dialog.page.pageNum = val
				//获取小说列表
				that.getBookList()
			},
			dialoghandleSizeChange(val){
				that.dialog.page.pageSize = val
				//获取小说列表
				that.getBookList()
			}
		}
	};
</script>

<style lang="scss" scoped>
	.bookList {
		.lz-header {}
		
		.el-pagination {
			float: right;
			margin: 10px 0;
		}
	}
	.lztable{
		.radio{display: flex;align-items: center;}
		.image{
			width: 50px!important;height: 60px!important;
		}
		
	}
</style>
